import React, { Component } from 'react';

// import { connect } from 'react-redux';
// import { bindActionCreators } from 'redux';

import { bindActionCreators, connect } from '../yl-react-redux';

@connect(
  // mapStateToProps
  (state) => ({ count: state.count }),

  // mapDispatchToProps   object | function
  // {
  //   add: () => ({ type: 'ADD', payload: 100 }),
  //   minus: () => ({ type: 'MINUS', payload: 100 }),
  // }
  (dispatch) => {
    // const add = () => dispatch({ type: 'ADD', payload: 100 });
    // const minus = () => dispatch({ type: 'MINUS', payload: 100 });

    let creators = {
      add: () => ({ type: 'ADD', payload: 100 }),
      minus: () => ({ type: 'MINUS', payload: 100 }),
    };
    creators = bindActionCreators(creators, dispatch);

    return { dispatch, ...creators };
  }
)
export default class ReduxPage extends Component {
  addState = () => {
    this.props.dispatch({ type: 'ADD', payload: 100 });
  };

  minusState = () => {
    this.props.dispatch({ type: 'MINUS', payload: 100 });
  };

  render() {
    console.log('this==>', this);
    console.log('this.props==>', this.props);
    const { count, add, minus } = this.props;
    return (
      <div>
        <h3>ReduxPage</h3>
        <div>{this.props.count}</div>
        <button onClick={this.addState}>dispatch add</button>
        <button onClick={this.minusState}>dispatch minus</button>
        <br />
        <button onClick={add}>add</button>
        <button onClick={minus}>minus</button>
      </div>
    );
  }
}
